<style lang="less" scoped>
  @import 'page.less';
</style>

<template>
  <Div class="grap">
      <Row>
        <Div class="name">
            <Label>门店名称</Label>
            <Select filterable v-model="store">
                <Option v-for="item in stroes" :value="item.id" :label="item.store_name" :key="item.id">{{ item.store_name }}</Option>
            </Select>
        </Div>
        <Div class="timer">
          <Label>时间段</Label>
          <DatePicker  placeholder="开始时间" format="yyyy-MM-dd" @on-change="(v)=>{this.start = v}"></DatePicker >
          <Span>-</Span>
          <DatePicker  placeholder="结束时间" format="yyyy-MM-dd" @on-change="(v)=>{this.end = v}"></DatePicker >
        </Div>
        <Div class="sechbtn">
          <Button icon="ios-search" @click="search">查询</Button>
        </Div>
      </Row>
      <div id="grap"></div>
  </Div>
</template>

<script>
import { orderCountInit, orderCountSearch, storesInit } from '@/api/order'

import echarts from 'echarts';
export default {
  data() {
      return {
          item: [],
          grapList: [],
          start: '',
          end: '',
          store: '',
          stroes: []
      }
  },
  mounted (){
      orderCountInit().then(Response => {
        const option = { 
            tooltip : {
                trigger: 'axis'
            },
            calculable : true,
            xAxis : [
                {
                    type: 'category',
                    data: Response.data.data.channels.title,
                    boundaryGap : true,
                    show : true,
                    axisLabel:{  
                        interval:0
                    }
                }
            ],
            yAxis : [
                {
                    type: 'value'
                }
            ],
            series : [
                {
                    name:'支付统计',
                    type:'bar',
                    barWidth: 40,
                    data: Response.data.data.channels.value,
                    //配置样式
                    itemStyle: {   
                        //通常情况下：
                        normal:{  
        　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                            color: function (params){
                                var colorList = ['#56c881','#34b9ff','#d38ee9','#59abff','#fbbe5e','#00a2ac','#ff7a7a'];
                                return colorList[params.dataIndex];
                            }
                        }
                    }
                }]
        };
        const serviceRequestCharts = echarts.init(document.getElementById('grap'));
        serviceRequestCharts.setOption(option);

        window.addEventListener('resize', function () {
            serviceRequestCharts.resize();
        });
      })
      storesInit().then(Response => {
          this.stroes = Response.data.data.stores
      })
 },
  methods: {
       search() {
          orderCountSearch(this.store, this.start, this.end).then(Response => {
            const option = { 
                tooltip : {
                    trigger: 'axis'
                },
                calculable : true,
                xAxis : [
                    {
                        type: 'category',
                        data: Response.data.data.channels.title,
                        boundaryGap : true,
                        show : true,
                        axisLabel:{  
                            interval:0
                        }
                    }
                ],
                yAxis : [
                    {
                        type: 'value'
                    }
                ],
                series : [
                    {
                        name:'支付统计',
                        type:'bar',
                        barWidth: 40,
                        data: Response.data.data.channels.value,
                        //配置样式
                        itemStyle: {   
                            //通常情况下：
                            normal:{  
            　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params){
                                    var colorList = ['#56c881','#34b9ff','#d38ee9','#59abff','#fbbe5e','#00a2ac','#ff7a7a'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        }
                    }]
            };
            const serviceRequestCharts = echarts.init(document.getElementById('grap'));
            serviceRequestCharts.setOption(option);

            window.addEventListener('resize', function () {
                serviceRequestCharts.resize();
            });
        })
      }
  }
}
</script>
